<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<zy-title title="人气榜"></zy-title>
			</template>
		
			<view class="zy-row-wrap">
				<view class="zy-column" v-for="(item, index) in dataList" :key="index" :class="{'offset-left': index>0 && index%2 ==1}">
					<view style="background-color: #000000; height: 130rpx;" v-if="index==2">
						<view class="zy-row-center zy-text-yellow-lg-super-bold zy-mt">榜单第一名</view>
						<view class="zy-row-center zy-text-yellow zy-font-bold zy-mt-sm zy-mb-lg">TeAi中的万分之一的榜首</view>
					</view>
					<view class="item" :class="{'item-one': index==0, 'offset-top': index>2 && index%2 ==1}">
						<image class="zy-pic-bg" :src="item.headPicUrl" mode="aspectFill"></image>
						<view class="item-num" :class="{'item-num-one': index==0}">{{index==0?'榜首#1': `#${index+1}`}}</view>
						<view class="zy-column-end zy-pl zy-bg-gradient" style="position: absolute; bottom: 0; left:0; right: 0; height: 200rpx;">
							<view class="zy-row zy-mb-sm">
								<view class="zy-text-white zy-font-bold" :class="{'title-one': index==0}">{{item.nick}}</view>
								<image class="zy-icon zy-ml-sm" mode="widthFix" :src="getImageUrl('ic_crown.png')"></image>
							</view>
							<view class="zy-row zy-mb-lg">
								<image class="zy-icon-sm" mode="widthFix" :src="getImageUrl('ic_gift_white.png')"></image>
								<view class="zy-text-white-sm zy-ml-sm zy-font-bold"  :class="{'sub-one': index==0}">669894</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
			};
		},
		methods: {
			queryList(pageNo, pageSize) {
				const params = {
					pageNo: pageNo,
					type: '1'
				}
				uni.$http.get("/api/user/getUserPage", params)
					.then(res => {
						this.$refs.paging.complete(res.data);
					}).catch(res => {
						this.$refs.paging.complete(false);
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		position: relative; 
		width: 360rpx; 
		height: 480rpx; 
		margin: 5rpx;
	}
	
	.item-one{
		width: 750rpx;
		height: 989rpx; 
		margin-bottom: 5rpx;
	}
	
	.offset-left{
		margin-left: 10rpx;
	}
	
	.offset-top{
		position: relative; 
		top: -130rpx;
	}
	
	.item-num{
		position: absolute;
		top: 20rpx;
		background: linear-gradient(90deg, #D49826 0%, #FBE170 100%);
		border-radius: 0rpx 8rpx 8rpx 0rpx;
		padding: 5rpx 10rpx;
		
		font-size: 24rpx;
		color: #222;
	}
	.item-num-one{
		top: 90rpx;
		border-radius: 0rpx 15rpx 15rpx 0rpx;
		padding: 12rpx 24rpx;
		font-size: 40rpx;
	}
	.title-one{
		font-size: 50rpx;
		font-weight: bold;
	}
	.sub-one{
		font-size: 28rpx;
	}
	
</style>
